<!-- PantTime 排期时间 -->
<template>
  <!-- scroll-into-view -->
  <scroll-view
    scroll-with-animation
    :scroll-into-view="id"
    scroll-x="true"
    class="PantTime"
  >
    <view class="scroll-main">
      <view class="scroll-main" v-for="(item, index) in dateList" :key="index">
        <date-title
          class="vm"
          :check="getItem(item)"
          :value="$utils.dateDescfrt(item.sDate)"
        />
        <!--      @click.native="handelClick(list)" -->
        <plan-item
          :id="`id-${list.planKey}`"
          @change="handelClick"
          :end="list.eTime"
          :check="list.planKey === Value"
          v-for="list in item.list"
          :key="list.planKey"
          :desc="list.copyLanguage + list.copyType"
          :time="list.sTime"
          :price="list.salePrice"
          :item="list"
        />
      </view>
    </view>
  </scroll-view>
</template>

<script>
  import DateTitle from './DateTitle'
  import PlanItem from './PlanItem'
  export default {
    name: 'PantTime',
    components: { DateTitle, PlanItem },
    props: {
      value: {
        type: String,
        required: true
      },
      // query: {
      //   type: Object
      // },
      dateList: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    data() {
      return {
        id: ''
      }
    },
    computed: {
      Value: {
        set(v) {
          this.$emit('input', v)
        },
        get() {
          return this.value
        }
      }
    },
    methods: {
      handelClick(item) {
        console.log(item)
        if (this.Value === item.planKey) return
        this.Value = item.planKey
        this.$nextTick(() => {
          this.$emit('change', this.Value, item)
          // this.$emit('click', this.Value, item)
        })
      },
      getItem(item) {
        const check = item.list.findIndex((i) => i.planKey === this.Value)
        if (check > -1) {
          setTimeout(() => {
            this.id = `id-${this.value}`
          }, 100)
        }
        return check > -1
      }
    }
  }
</script>
<style lang="scss" scoped>
  .PantTime {
    padding-left: 30rpx;
    box-sizing: border-box;
    width: 100%;
    white-space: nowrap;
    margin-bottom: 25rpx;
    // transition: all 0.2s;
  }
  .vm {
    display: inline-block;
    vertical-align: middle;
  }
  .scroll-main {
    display: flex;
    flex-direction: row;
  }
</style>
